﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户中心</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script
	src="js/jquery.validation/jquery-validation-1.14.0/lib/jquery.js"></script>
<script
	src="js/jquery.validation/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script
	src="js/jquery.validation/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

<style>
input.error {
	border: 1px solid #E6594E;
}
</style>
<style>
.error {
	color: red;
}
</style>
</head>
<body>
	<div class="container">

		<form id="addUserForm">
			<br />
			<div class="form-group">
				<label for="userName">用户名：</label> <input type="text"
					class="form-control" id="userName" name="userName"
					placeholder="输入用户名">
			</div>
			<div class="form-group">
				<label for="pwdword">用户密码：</label> <input type="text"
					class="form-control" id="pwdword" name="pwdword"
					placeholder="输入用户密码">
			</div>
			<div class="form-group">
				<label for="sex">用户性别：</label> <input type="text"
					class="form-control" id="sex" name="sex" placeholder="输入性别">
			</div>
			<div class="form-group">
				<label for="telephone">联系方式：</label> <input type="text"
					class="form-control" id="telephone" name="telephone"
					placeholder="输入联系方式">
			</div>
			<div class="form-group">
				<button type="button" id="saveBtn" class="btn btn-success">提交</button>
				<button type="button" id="cancelBtn" class="btn btn-default">取消</button>
			</div>
		</form>
	</div>

	<script>
		var addUser = function() {
			if (!validform().form()) {
				return;
			}
			$.ajax({
				type : "GET",
				dataType : "json",
				url : "/user/add",//用的是异步提交add页面而不是表单提交页面
				data : {//页面传值
					"userName" : $("#userName").val(),
					"pwdword" : $("#pwdword").val(),
					"sex" : $("#sex").val(),
					"telephone" : $("#telephone").val()

				},
				success : function(msg) {
					//	alert(msg);
					$('#cancelBtn').click(); //当添加成功，不再添加用户后，点击取消按钮，关闭弹出层		
				}
			});
		}

		$('#saveBtn').on('click', function() {
			addUser();//调用添加函数,可以多次添加，直到点击取消按钮，结束添加用户
		});

		$('#cancelBtn').on('click', function() {//关闭弹出层后并显示刷新列表
			var index = parent.layer.getFrameIndex(window.name);
			parent.getUserList();
			parent.layer.close(index);
		});

		//表单提交验证，校验表单

		var validform = function() {
			return $("#addUserForm").validate({
				rules : {
					userName : {
						required : true,
						minlength : 2
					},
					pwdword : {
						required : true,
						minlength : 5
					},
					sex : {
						required : true,
						maxlength : 1,
						minlength : 1
					},
					telephone : {
						required : true,
						maxlength : 11,
						minlength : 11,
						digits : true
					}

				},
				messages : {
					userName : {
						required : "请输入用户名",
						minlength : "用户名至少由两个字母组成"
					},
					pwdword : {
						required : "请输入密码",
						minlength : "密码长度不能小于 5 个字母"
					},
					sex : {
						required : "请输入您的性别",
						maxlength : "只能是男或女",
						minlength : "只能是男或女"
					},
					telephone : {
						required : "请输入手机号",
						maxlength : "手机号码只有11位",
						minlength : "手机号码只有11位",
						digits : "只能输入数字"
					}
				}
			});

		}
		// 在键盘按下并释放及提交后验证提交表单，不是全部填写完成点提交才显示提示信息的
		$().ready(function() {

			validform();
		});
	</script>
</body>
</html>